<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加角色</title>
    {% load static %}
    {% csrf_token %}
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/css/oksub.css">
    <script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
    <script src="/static/lib/layui/layui.js"></script>

   <link type="text/css" rel="stylesheet" href="/static/css/metroStyle.css">
    <link type="text/css" rel="stylesheet" href="/static/css/treeSelectStyle.css">
    <script src="/static/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="/static/js/treeSelect.2.0.js"></script>
    <script type="text/javascript" src="/static/js/xm-select.js"></script>
</head>
<body>
<div class="ok-body">
    <!--form表单-->
    <form class="layui-form layui-form-pane ok-form">
        <div class="layui-row layui-col-space10">
            <div class="layui-inline layui-col-md12">
            <label class="layui-form-label">选择协议<span style="color: red">*</span></label>
            <div class="layui-input-block" id="contract" name="contract">
            </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-inline layui-col-md12">
                <label class="layui-form-label">上传附件<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                        <span style="padding-left: 30px;color: red;">tips:这里暂时只支持上传pdf格式的文件</span>
                        <div class="layui-upload-list">
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th>文件名</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="demoList"></tbody>
                            </table>
                            <button id="hideUpload" type="button" style="display: none"></button>
                        </div>
                        <button class="layui-btn" lay-submit="" lay-filter="testListAction">开始上传</button>
                        <button type="button" class="layui-btn" id="closebtn">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!--js逻辑-->
<script>
     layui.config({
        base: '/static/lib/layui/lay/tree_select/'
    }).use(["form", "okUtils", "form", "tree", "upload","okLayer"], function () {

        let $ = layui.$;
        let form = layui.form;
        let okUtils = layui.okUtils;
        let okLayer = layui.okLayer;
        let tree = layui.tree;
        let util = layui.util;
        let upload = layui.upload;
         okLoading.close();
         var demoListView = $('#demoList')
             , uploadListIns = upload.render({
             elem: '#testList'
             , url: "{% url 'business:confiles_uploads1' %}"
             , accept: 'file'
             , data: {}   //可放扩展数据  key-value
             , bindAction: '#hideUpload'
             , number: 3 //限制文件数量
             , exts: 'pdf' //限制只能传pdf
             , size:102400 //限制文件大小，单位 KB
             , multiple: true
             , auto: false
             ,before: function (obj) { // 上传文件方法执行前调用
                    this.data = {'contract_id': demo1.getValue()[0].id}; // 获取主键，并方便保存至文件表数据库
                }
             , choose: function (obj) {
                 var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                 //读取本地文件
                 obj.preview(function (index, file, result) {
                     var tr = $(['<tr id="upload-' + index + '">'
                         , '<td>' + file.name + '</td>'
                         , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                         , '<td>等待上传</td>'
                         , '<td>'
                         , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                         , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                         , '</td>'
                         , '</tr>'].join(''));

                     //单个重传
                     tr.find('.demo-reload').on('click', function () {
                         obj.upload(index, file);
                     });

                     //删除
                     tr.find('.demo-delete').on('click', function () {
                         delete files[index]; //删除对应的文件
                         tr.remove();
                         uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                     });

                     demoListView.append(tr);
                 });
             }
             , done: function (res, index, upload) {
                 if (res.code == 200) //上传成功
                     var tr = demoListView.find('tr#upload-' + index)
                         , tds = tr.children();
                 tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                 tds.eq(3).html(''); //清空操作
                 return delete this.files[index]; //删除文件队列已经上传成功的文件

             } //code为后台传回来的数据，具体多少自己定，

             //后台只能传回json格式数据，不然会走error函数；

             , error: function (index, upload) {

             }
         });
         $('#closebtn').click(function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
         });


         form.on('submit(testListAction)',function (data) {
             var knowledge = {
                    contract_id:demo1.getValue()[0].id
                };
             $.ajax({
                    type: 'post',
                    dataType: "json",
                    url: "{% url 'business:confiles_uploads' %}",
                    async:false,
                    data: knowledge,
                    success: function (res) {
                        if (res.code == 0) {
                            $('#hideUpload').trigger('click');
                            layer.msg("数据保存成功!", {
                                time: 3000
                            });
                        } else {
                            layer.msg("数据保存失败!请重新填写！", {
                                time: 3000
                            })
                        }
                    },
                    error: function (err) {

                    }
                });
                return false;
            });
         });
</script>
<script type='text/javascript'>
var demo1 = xmSelect.render({
	el: '#contract',
	radio: true,
    clickClose: true,
    filterable: true,
    paging: true,
    pageSize: 3,
    layVerType: 'msg',
    toolbar: {show: true},
    layVerify: 'required',
    prop:{
	    name:'paper_code',
        value:'id',
    },
	tree: {
		show: true,
		strict: false,
	},
	height: 'auto',
	data(){
		return []
	}
    });
    $.ajax({
        url: "{% url 'business:confiles_contracts' %}",
        type: "GET",
        success: function (ret) {
            var node = ret;
            demo1.update({
                data: node.data,
                autoRow: true,
            })
        },
        error: function () {
        }
    });
</script>
</body>
</html>
